<template>
    <el-form :model="ruleForm" ref="ruleForm" label-width="186px" label-position="right" :class="$attrs.type">
        <el-form-item label="是否启用以下密码策略:" prop="pwdStrategyIsOpen">
            <el-switch v-model="ruleForm.pwdStrategyIsOpen" :disabled="disabled"></el-switch>
        </el-form-item>
        <el-form-item label="密码必须符合复杂性要求:" prop="pwdRequirements" v-if="isShow">
            <el-switch v-model="ruleForm.pwdRequirements" :disabled="disabled"></el-switch>
            <span class="note"
                >*在更改或创建密码时执行复杂度要求:密码长度限定为8-16位,且须同时包含数字(0-9)、大写字母(A -Z)、小写字母(a-z)、特殊字符(例如
                :!、$、#、%)
            </span>
        </el-form-item>

        <el-row v-if="isShow">
            <el-col :span="13">
                <el-form-item label="密码有效期:" prop="pwdStrategyModifyInterval">
                    <el-input
                        size="mini"
                        v-model="ruleForm.pwdStrategyModifyInterval"
                        @input="inputChange($event, 'pwdStrategyModifyInterval')"
                        class="input120"
                        :disabled="disabled"
                    >
                        <template slot="append">天</template>
                    </el-input>
                    <!-- <el-input :value="'天'" size="mini" class="input45" readonly></el-input> -->
                    <span class="note">*密码到期前需修改密码,密码到期后无法登录系统 </span>
                </el-form-item>
            </el-col>

            <el-col :span="11" v-if="isShow">
                <el-form-item label="失效预警期:" prop="pwdStrategyUserWarnDay" label-width="140px">
                    <el-input
                        size="mini"
                        v-model="ruleForm.pwdStrategyUserWarnDay"
                        class="input120"
                        :disabled="!ruleForm.pwdStrategyModifyInterval || disabled"
                        @input="inputChange($event, 'pwdStrategyUserWarnDay')"
                    >
                        <template slot="append">天</template>
                    </el-input>
                    <!-- <el-input value="天" size="mini" class="input45" readonly></el-input> -->
                    <span class="note"> *密码会在过期前的多少天给出相应提示</span>
                </el-form-item>
            </el-col>
        </el-row>
        <!-- 处理有值的大小要求TODO -->
        <el-form-item label="试错锁定:">
            密码连续输错:
            <el-input
                size="mini"
                v-model="ruleForm.firstLockCount"
                class="input100"
                @input="inputChange($event, 'firstLockCount')"
                :disabled="disabled"
            >
                <template slot="append">次</template>
            </el-input>
            <!-- <el-input value="次" size="mini" class="input45" readonly></el-input> -->
            锁定
            <el-input
                size="mini"
                v-model="ruleForm.firstLockTime"
                class="input100"
                @input="inputChange($event, 'firstLockTime')"
                :disabled="disabled"
            ></el-input>
            <el-select
                v-model="ruleForm.firstLockUnit"
                size="mini"
                class="input80"
                @input="inputChange($event, 'firstLockUnit')"
                :disabled="disabled"
            >
                <el-option label="分钟" value="minute"></el-option>
                <el-option label="小时" value="hour"></el-option>
            </el-select>
            <br />
            密码连续输错:
            <el-input
                size="mini"
                v-model="ruleForm.secondLockCount"
                class="input100"
                @input="inputChange($event, 'secondLockCount')"
                :disabled="disabled"
            >
                <template slot="append">次</template>
            </el-input>
            <!-- <el-input value="次" size="mini" class="input45" readonly></el-input> -->
            锁定
            <el-input
                size="mini"
                v-model="ruleForm.secondLockTime"
                class="input100"
                @input="inputChange($event, 'secondLockTime')"
                :disabled="disabled"
            ></el-input>
            <el-select v-model="ruleForm.secondLockUnit" size="mini" class="input80" :disabled="disabled">
                <el-option label="分钟" value="minute"></el-option>
                <el-option label="小时" value="hour"></el-option>
            </el-select>
            <br />
            密码连续输错:
            <el-input
                size="mini"
                v-model="ruleForm.thirdLockCount"
                class="input100"
                @input="inputChange($event, 'thirdLockCount')"
                :disabled="disabled"
            >
                <template slot="append">次</template>
            </el-input>
            <!-- <el-input value="次" size="mini" class="input45" readonly></el-input> -->
            默认永久锁定，直至管理员手动解锁账户
        </el-form-item>
        <el-form-item label="密码历史记忆次数:" prop="passwordRemCount" @input="inputChange($event, 'passwordRemCount')">
            <el-input size="mini" v-model="ruleForm.passwordRemCount" class="input120" :disabled="disabled">
                <template slot="append">次</template>
            </el-input>
            <!-- <el-input value="次" size="mini" class="input45" readonly></el-input> -->
            <span class="note"> *新密码不能与最近前（1-10的整数）次密码相同</span>
        </el-form-item>
        <el-form-item label="账号闲时自动退出:" prop="loginTimeout">
            <el-input
                size="mini"
                v-model="ruleForm.loginTimeout"
                class="input120"
                @input="inputChange($event, 'loginTimeout')"
                :disabled="disabled"
            ></el-input>
            <el-select v-model="ruleForm.loginTimeoutUnit" size="mini" class="input80" :disabled="disabled">
                <el-option label="分钟" value="minute"></el-option>
                <el-option label="小时" value="hour"></el-option>
            </el-select>
            <span class="note">*用户登录系统后，在相应时长内未进行任何操作，系统将自动退出 </span>
        </el-form-item>
    </el-form>
</template>
<script lang="ts">
import { getConfigItem } from '@/utils/tools';
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import { StrategySettingDTO } from '../vo/password-strategy';

@Component({ name: 'StrategyForm', components: {} })
export default class StrategyForm extends Vue {
    @Prop() initForm: StrategySettingDTO;
    @Watch('initForm', { immediate: true, deep: true })
    change() {
        this.ruleForm = JSON.parse(JSON.stringify(this.initForm));
    }

    ruleForm: StrategySettingDTO = {
        pwdStrategyIsOpen: true,
        pwdRequirements: true,
        pwdStrategyModifyInterval: 0,
        pwdStrategyUserWarnDay: 0,
        firstLockCount: 0,
        firstLockTime: 0,
        firstLockUnit: 'minute',
        secondLockCount: 0,
        secondLockTime: 0,
        secondLockUnit: 'hour',
        thirdLockCount: 0,
        passwordRemCount: 0,
        loginTimeout: 12,
        loginTimeoutUnit: 'minute',
    };

    get isShow() {
        return getConfigItem('SHOW_SECURITY') !== 'SINOSIG';
    }

    get disabled() {
        return this.$attrs.type == 'look';
    }

    // 输入框值改变
    inputChange(value: any, param: string) {
        // console.log(value, typeof value, param);
        value = Number(String(value).replace(/[^\d]/g, ''));
        // console.log(value, 'value+++');
        this.ruleForm[param] = value;
        if (param == 'pwdStrategyModifyInterval' && !value) {
            this.ruleForm.pwdStrategyUserWarnDay = 0;
        } else if (param == 'pwdStrategyModifyInterval' && value && !this.ruleForm.pwdStrategyUserWarnDay) {
            // TODO
            this.ruleForm.pwdStrategyUserWarnDay = 10;
        }
    }
}
</script>
<style lang="scss" scoped>
.input120 {
    width: 120px;
}
.input100 {
    width: 100px;
}
.input80 {
    width: 80px;
}
.note {
    margin-left: 5px;
    color: red;
    font-size: 12px;
}
/deep/ .el-input__inner {
    border-radius: 0 !important;
    vertical-align: middle;
}
/deep/ .el-form-item {
    margin-bottom: 30px;
    .el-form-item__label {
        color: #575757;
    }
}
.look /deep/ .el-form-item {
    margin-bottom: 10px;
}
.el-input {
    display: inline-table;
    /deep/ .el-input-group__append {
        padding: 0 10px !important;
    }
}
/deep/ .el-form-item__content .el-input-group {
    vertical-align: middle;
    .el-input-group__append {
        background-color: #fff;
    }
}
</style>
